<template>
  <div id="app">
    <!-- 头部大图 -->
    <header class="header">
      <img src="@/assets/img/f.jpeg" style="height: 350px;width: 100%;object-fit: cover" fit="cover" alt="西藏风光" /> 
      <h1 class="header-title">西藏风土人情</h1>
    </header>

    <!-- 西藏风土人情内容 -->
    <section class="content">
      <div class="section-title">
        <h2>西藏的文化与风土人情</h2>
      </div>

      <div v-for="(item, index) in tibetCulture" :key="index" class="culture-item">
        <img :src="item.img" alt="西藏文化" class="culture-image" />
        <div class="culture-text">
          <h3>{{ item.title }}</h3>
          <p>{{ item.description }}</p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import z1 from '@/assets/img/z1.jpeg'
import z2 from '@/assets/img/z2.jpeg'
import z3 from '@/assets/img/z3.jpg'
import z4 from '@/assets/img/z4.jpeg'
const tibetCulture = ref([
  {
    img: z1,
    title: '藏族文化',
    description: '西藏是藏族的发源地，藏族文化深受藏传佛教的影响，拥有独特的艺术、建筑和节庆。',
  },
  {
    img: z2,
    title: '藏传佛教',
    description: '藏传佛教是西藏的主流宗教，它不仅是宗教信仰，还是藏族人民生活的重要部分。',
  },
  {
    img: z3,
    title: '西藏美食',
    description: '西藏的美食以肉类为主，特色菜品有糌粑、酥油茶和藏香猪肉等。',
  },
  {
    img: z4,
    title: '藏族服饰',
    description: '藏族的传统服饰色彩鲜艳，富有民族特色，体现了藏族人对自然和神灵的崇敬。',
  },
])

</script>

<style scoped>
/* 页面背景 */
#app {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f9f9f9;
}

/* 头部样式 */
.header {
  position: relative;
  text-align: center;
}

.header-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  filter: brightness(0.6); /* 图片调暗 */
}

.header-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  color: white;
  font-weight: bold;
}

/* 内容部分 */
.content {
  padding: 20px;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
}

.section-title h2 {
  font-size: 36px;
  color: #333;
}

.culture-item {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.culture-image {
  width: 24%;
  height: 230px;
  object-fit: cover;
  border-radius: 10px 0 0 10px;
}

.culture-text {
  padding: 20px;
  width: 60%;
}

.culture-text h3 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.culture-text p {
  font-size: 16px;
  color: #666;
}
</style>
